<template>
  <div>
    <p>age: {{age}}</p>
    <button @click="age++">age++</button>
    <p>num: {{num}}</p>
    <button @click="num++">num++</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup () {
    const age = ref(18)
    const num = ref(5)

    // watch 监听 ref 数据
    /* watch(age, (newAge, oldAge) => {
      console.log(newAge, oldAge)
    }) */
    // watch 可以监听多个数据，放到数组里面
    watch([age, num], (newAge, oldAge) => {
      console.log(newAge, oldAge)
    })

    return {
      age,
      num
    }
  }
}
</script>

<style lang="scss" scoped>

</style>